独家揭秘淘宝折叠屏设计内幕与适配开发

距离折叠屏的正式发布日期已愈来愈近，目前淘宝APP针对折叠屏的先期适配工作也已初步完成。

鉴于之前那篇《折叠屏就应该这样设计》的文章引起不少反响，也有读者提出了设计上的建议和疑问，这里我们将介绍淘宝设计团队折叠屏具体设计实践过程，揭秘实际适配开发过程的内幕，希望能为大家的适配工作带来些帮助和参考价值。

淘宝折叠屏设计适配于3月启动，5月初步完成。

▲ 折叠屏设计适配基本过程

前期设计探索

─

探索阶段重点需要分析新技术和新硬件带来的设计体验变化，结合业务场景去充分利用新变化解决实际用户体验问题。由于是探索期，此环节可以不过多考虑开发实现成本，核心去思考新变化带来的设计可能性。前期设计资料的收集来源主要是官方网站、发布会视频、官方开发者中心相应文档等。

折叠屏的特性其一是大屏下内容显示会更丰富。华为折叠屏展开态分辨率为2480x1148像素，三星折叠屏展开态分辨率为2152x1530像素，显然各厂家的分辨率是不同的，设计师需要考虑的是能适配任意屏幕尺寸的通用解决方案。

▲ 华为和三星折叠屏相关尺寸参数

这里我们可以参考网页端的响应式设计思路，即“内容像水一样是流动的”（“Content is like water”）。实际操作起来界面布局在大屏下有如下4种基本适配方式：

A、内容x轴拉升（Y轴保持不变，X轴横向拉升，比较适合列表型页面）;

B、内容等比缩放（XY轴等比缩放显示，简单快速适配方式）;

C、内容扩展（使用新的内容补充多出来的空间，适合图片运营类页面）;

D、内容流动（调整内容模块去补充多出来的空间，适合模块化页面)。

▲  4种基础大屏适配方式

淘宝业务场景里，一大类页面是内容营销型的，关注的是尽量提供内容浏览效率。以往移动端的设计方式是纵向拓展（比如淘宝首页）或浮层形式（比如直播商品列表浮层）去解决大量内容的呈现，而现在可以有效利用折叠屏的大屏模式进行内容展示。由于A、B方式显示内容并没有增加，C方式则需要额外的设计素材去补充内容，我们推荐采用的是D内容流动的方式去设计适配。

▲  淘宝首页的内容流动设计适配

需要说明的是以上适配方式是可以组合应用的，首页是A+D组合适配的，即导航（包括头部搜索栏和底部tabbar）是A方式适配，左右模块共用导航；页面内容是D方式适配，分为左右两个独立区块。页面滑动时，导航保持不动，左右区块可以独立滑动。类似的体验在邮件类页面也可以见到。

▲  淘宝首页大屏下左右区块滑动演示

折叠屏的特性其二是大屏下的多任务效率提升。华为和三星都提供了系统级的多任务方案，从效果演示来看屏幕会变成双屏模式，左右可以各自处理独立任务，也可以互相联动。

淘宝业务场景里，基础交易链路是核心的任务操作，关注的是购买流程的流畅度，而宝贝详情页面是其中购物体验的核心任务集中地。目前移动端的宝贝详情页一大体验痛点是多商品比较、评价参考、客服聊天等等用户购物决策操作是跳出页面，因此淘宝折叠屏的多任务解决方案以宝贝详情页为主要设计场景。

▲  宝贝详情页的多任务设计方案

在设计方案中，我们将左屏幕设定为主任务，右屏幕设定为子任务，当用户点击子任务入口时（比如评价、客服聊天）便会激活子任务窗口，折叠屏大屏会变成左右分屏状态。跟上面大屏适配不同的地方是这里左右分屏的导航是独立的，不共用。比如：左屏主任务的导航返回操作会结束主流程，而右屏子任务的导航返回操作是返回子任务的上次操作，左屏不发生变化。

协同开发落地

─

这个阶段是将前期概念设计去真正地开发实现落地，设计师有必要去了解相关技术方式，寻找最优的可执行的适配方案。

实际开发评估首先碰到的问题是界面设计模块化不等同于开发层面的模块化。先科普下安卓平台Activity和Fragment两个技术术语。Activity是安卓基础组件，可以理解为界面显示的视窗，而Fragment是个小型的UI片段，它可以组成完整的Activity，能很方便地进行模块化开发和响应式布局。

界面设计上，淘宝的大部分页面都已遵循卡片形式的模块化设计，但在开发层面并不是。后续的建议是开发前期，设计师和开发工程师需要提前约定好大屏适配方式，然后特定模块按照Fragment进行开发。

▲  技术底层的模块化开发

其次淘宝APP的技术底层的错综复杂的，不少页面是客户端和类网页技术混合使用开发的，由于两者的UI单位规则是不一致的，在屏幕宽度变化后，按各自单位适配，导致元素尺寸出现不一致。

明确技术问题所在和整体工作量评估后，短时间内按上述理想设计方案落地有一定难度。这时候需要项目组确定适配的统一目标，拆解任务，动态调整方案。我们最终将适配拆解为二期：

一期适配的核心目的是保障淘宝核心页面在折叠屏下的设计可用性，包括功能可用、功能完整、内容显示完整等，偏差在容许范围内。为解决不同技术框架下元素比例不一致问题，我们采用相对屏幕尺寸的概念进行单位转化。

二期的重点则是按设计最优方案推进落地，开发底层按约定的Fragment进行模块化重构。

真机测试走查

─

这个阶段是避免设计闭门造车的关键，尽量使用真机测试体验一遍核心页面，基于真机操作体验做持续优化改进。由于折叠屏手机还未正式上市，前期可以基于厂家提供的模拟器进行页面模拟走查，后期需要同厂家合作借用原型机进行真机适配。

我们在真实体验三星和华为的折叠屏手机后，总结如下两点主要感受供大家参考。

1、折叠屏真实物理尺寸偏小。折叠屏手机毕竟基于手机尺寸设计，即使展开后，尺寸仍然较普通平板小，可以使用两台手机并列摆放体验感受大小。真实折叠展开后，界面上内容会显得丰富，但也容易感觉元素拥挤，建议设计时增大留空和简化模块。

2、适配屏幕尺寸多样。大部分情况我们在走查的是大屏展开后的显示效果，容易忽视次级状态的屏幕适配。这里的次级状态主要包括三星未折叠时的外屏、系统多任务时的分屏等。这些次级状态都需要设计走查到。另外走查时，也需要关注折叠屏展开过程前后的屏幕内容变化。

最后，淘宝折叠屏版的适配是边摸索边改进方案的过程，目前我们的适配方案可能并不完美，也欢迎大家留言交流。

参考文档：

《华为Mate X显示适配指导》

https://developer.huawei.com/consumer/cn/devservice/doc/90101

《三星折叠手机设计指南》

https://developer.samsung.com/galaxy/foldable

《响应式设计基本原则》

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

////// END //////

系列文章推荐

淘宝设计，一个服务于全球亿万消费者体验的设计团队，致力于让设计触动人心，让商业美而简单。

公众号   抖音      知乎      微博

淘宝设计 淘宝设计部的故事 淘宝设计 淘宝UED